<template>
  <div class="ChatHeader">
    <ChatSetting class="headerBtn" />
    <div class="ChatPre headerBtn">
      <c-button quaternary @click="drawerActive" iconName="InboxTwotone"></c-button>
      <ChatPre ref="ChatPreRef" />
    </div>
    <div class="QQ headerBtn">
      <a href="https://qm.qq.com/cgi-bin/qm/qr?k=XcVyI2N6N5PoKGR0yhao5X_aBhddsKDL&jump_from=webapi&authKey=8gylJcDuYLb944F1paj+3xktojiKBZ1oaylx8yK8z8kvzcZe5XLH5A1tBLyPagMN"
        target="_blank" rel="noopener noreferrer">
        <c-button iconName="QqCircleFilled" quaternary>
        </c-button>
      </a>
    </div>
    <gptVits />
    <comflyUI />
  </div>
</template>

<script setup lang='ts'>
import gptVits from './gptVits.vue'
import comflyUI from './comfyUI.vue'
const ChatPreRef = ref()
const drawerActive = () => {
  if (Tauri.isTauri()) {
    Tauri.createWindow({ width: 1200, height: 1200, label: 'ChatPre', title: 'ChatPre', url: '/#/ChatPre' })
    Tauri.showWindow('ChatPre')
  } else {
    ChatPreRef.value.drawerActive()
  }
}
</script>

<style lang="scss">
.ChatHeader {
  height: 50px;
  width: 100%;
  display: flex;
  align-items: center;
  padding: 0px 10px;
}

.headerBtn {
  z-index: 3;
}
</style>